<script setup lang='ts'>
import { useRouter } from 'vue-router'
const $router = useRouter()
const props = defineProps({
    bookinfo: {
        type: Object,
    },
    currentRank: {
        type: String,
    },
    index: {
        type: Number,
    }
})

</script>

<template>
    <div class="book" v-if="props.bookinfo" @click="$router.push({
        path: '/detail', query: {
            id: props.bookinfo?.id, title: props.bookinfo?.title
        }
    })">
        <div class="book-img">
            <img v-lazy="props.bookinfo.cover" alt="">
        </div>
        <div class="book-msg">
            <div class="top">
                <h3>{{ props.bookinfo.title }}</h3>
                <span :class="{ c: Number(props.index) < 3 }">{{ Number(props.index) + 1 }}</span>
            </div>

            <p>{{ props.bookinfo.content }}</p>
            <div class="bottom">
                <span>{{ props.bookinfo.author }}/{{
                    props.bookinfo.category
                }}</span>
                <span v-if="props.currentRank == '人气榜' && props.bookinfo.clickCount >= 0" class="renqi">{{
                    props.bookinfo.clickCount
                }}人气</span>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.book {
    width: 100%;
    height: 91rem;
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 20rem;
    box-sizing: border-box;

    .book-img {
        margin-right: 10rem;
        font-size: 0;
        width: 65rem;

        img {
            width: 65rem;
            height: 91rem;
            box-shadow: 1rem 1rem 4rem 3rem #eee;
        }
    }

    .book-msg {
        height: 91rem;
        width: calc(100% - 85rem);
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;

        .top {
            display: flex;
            justify-content: space-between;
            align-items: cenetr;

            h3 {
                color: #000;
                font-weight: 400;
                font-size: 16rem;

                display: -webkit-box;
                -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
                text-overflow: ellipsis; //溢出用省略号显示
                overflow: hidden; //超出的文本隐藏
                -webkit-line-clamp: 1; //表明3行文本显示省略号,这里要根据自身需求进行设置

            }

            span {
                color: #999;
                font-size: 16rem;

                &.c {
                    color: #fc1c1c;
                }
            }
        }

        .bottom {
            display: flex;
            justify-content: space-between;
            width: 100%;

            span {
                font-size: 12rem;
                color: #999;

                &:first-child {
                    width: 60%;
                    display: -webkit-box;
                    -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
                    text-overflow: ellipsis; //溢出用省略号显示
                    overflow: hidden; //超出的文本隐藏
                    -webkit-line-clamp: 1; //表明3行文本显示省略号,这里要根据自身需求进行设置

                }

                &.renqi {
                    color: #fc1c1c;
                }
            }
        }


        p {

            font-size: 12rem;
            color: #999;
            box-sizing: border-box;

            display: -webkit-box;
            -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
            text-overflow: ellipsis; //溢出用省略号显示
            overflow: hidden; //超出的文本隐藏
            -webkit-line-clamp: 1; //表明3行文本显示省略号,这里要根据自身需求进行设置

        }
    }
}
</style>
